<template>
  <a-spin :spinning="confirmLoading">
    <a-form :form="form">

      <!--   <p>
        片段信息
        <a-icon type="right" />
      </p> -->
      <a-row :gutter="6">

        <a-col :xl="{span: 11}" :lg="{span: 8}" :md="{span: 12}" v-show="false">
          <a-form-item label="业务ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['id', {rules: [{required: true}]}]" />
          </a-form-item>
        </a-col>

        <a-col :xl="{span: 11}" :lg="{span: 8}" :md="{span: 12}">
          <a-form-item label="片段别名" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['alias', {rules: [{required: true, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
          </a-form-item>
        </a-col>

        <a-col :xl="{span: 11}" :lg="{span: 8}" :md="{span: 12}">
          <a-form-item label="片段编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input disabled v-decorator="['code', {rules: [{required: true, message: '请输入'}],initialValue:''}]" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="6">

        <a-col :xl="{span: 11}" :lg="{span: 8}" :md="{span: 12}">
          <a-form-item label="数据条数" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number style="width: 100%;" :min="0" v-decorator="['size', {rules: [{required: true, message: '请输入'}],initialValue:1}]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider dashed />
      <!--  <p>
        片段系统字段
        <a-icon type="right" />
      </p> -->
      <a-row :gutter="6" v-for="(field,index) in fields" :key="index">
        <a-col :xl="{span: 5}" :lg="{span: 8}" :md="{span: 24}">
          <a-form-item :label="field.fieldName" :labelCol="labelCol" :wrapperCol="{xs: {span: 24},sm:{ span: 4}}">
            <a-checkbox :value="field.fieldName" :checked="field.check" v-if="field.fieldCode!=='title'" @change="checkField($event,field)"></a-checkbox>
          </a-form-item>
        </a-col>

        <a-col :xl="{span: 6}" :lg="{span: 6}" :md="{span: 24}">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <p>{{ field.fieldName }}( {{ field.fieldCode }} )</p>
          </a-form-item>
        </a-col>

        <a-col :xl="{span: 5}" :lg="{span: 8}" :md="{span: 24}" v-if="field.check">
          <a-form-item label="必填" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-switch v-model="field.isRequired" />
          </a-form-item>
        </a-col>

        <a-col :xl="{span: 5}" :lg="{span: 8}" :md="{span: 24}" v-if="field.check">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-model="field.fieldAliase" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider dashed />
      <extend-model ref="extendModel" />
      <a-divider dashed />
      <div class="table-operator">
        <a-button type="primary" icon="check"  @click="handleSubmit">保存</a-button>
        <a-button type="primary" icon="close" @click="handleCancel">取消</a-button>
      </div>
    </a-form>
  </a-spin>
</template>

<script>
  import pick from 'lodash.pick'
  import {
    getFragmentInfo,
    updateFragment
  } from '@/api/site/fragment.js'
  import ExtendModel from '@/components/ExtendModel/ExtendModel.vue'
  export default {
    components: {
      ExtendModel
    },
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 7
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 13
          }
        },
        modalTitle: '',
        modalOpera: 0, // 0：新增 1：编辑
        visible: false,
        fileItem: null,
        templateId: null,
        confirmLoading: false,
        fields: [],
        form: this.$form.createForm(this)
      }
    },
    created () {},
    methods: {
      init (fileItem, templateId) {
        // console.log(fileItem)
        this.templateId = templateId
        this.fileItem = fileItem
        this.loadFragmentInfo(fileItem.fileInfo.fileName)
      },
      loadFragmentInfo (fileName) {
        getFragmentInfo({
          fileName: fileName
        }).then(response => {
          const result = response.res
          if (response.code === 0) {
            this.form.setFieldsValue(pick(result, 'id', 'alias', 'code', 'size'))
            this.setFields(result.defaultFieldList)
            this.setExtendFields(result.extendFieldList)
          }
        })
      },
      setFields (defaultFieldList) {
         if (defaultFieldList) {
             this.fields = JSON.parse(defaultFieldList)
         }
      },
      setExtendFields (extendFieldList) {
        if (extendFieldList) {
          this.$refs.extendModel.setDataSource(JSON.parse(extendFieldList))
        } else {
          this.$refs.extendModel.setDataSource([])
        }
      },
      checkField (e, field) {
          field.check = e.target.checked
      },
      bulidData (values) {
        values.defaultFieldList = JSON.stringify(this.fields)
        values.extendFieldList = JSON.stringify(this.$refs.extendModel.getDataSource())
        values.templateId = this.templateId
      },
      handleCancel () {
        this.setExtendFields(null)
        this.$emit('close')
      },
      handleSubmit () {
        const {
          form: {
            validateFields
          }
        } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.confirmLoading = true
            this.bulidData(values)
            updateFragment(values).then(response => {
              if (response.code === 0) {
                this.$emit('ok')
                this.handleCancel()
                this.$message.info(response.msg)
              } else {
                this.$message.error(response.msg)
              }
            })
          }
          this.confirmLoading = false
        })
      }
    }
  }
</script>
